<template>
  <div class="divWarehouse outDetails">
    <el-collapse
      v-model="activeNames"
    >
      <el-collapse-item
        title="基础信息"
        name="1"
      >
        <div class="main">
          <div class="divSteps">
            <el-steps
              :active="getStatus(baseData.status)"
              finish-status="success"
            >
              <el-step
                v-for="(item,i) in statusData"
                :key="i"
                :title="item.label"
                :description="item.time"
              >
              </el-step>
            </el-steps>
          </div>
          <div class="baseInfo">
            <el-row :gutter="30">
              <el-col :span="6">
                <p>入库单号</p>
                <p>{{baseData.code}}</p>
              </el-col>
              <el-col :span="6">
                <p>创建时间</p>
                <p>{{baseData.createTime}}</p>
              </el-col>
              <el-col :span="6">
                <p>计划到达时间</p>
                <p>{{baseData.planArrivalTime}}</p>
              </el-col>
              <el-col :span="6">
                <p>仓库名称</p>
                <p>{{baseData.warehouseName}}</p>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item
        title="货主信息"
        name="2"
        v-if="baseData.status !==3 "
      >
        <div>
          <div class="baseInfo">
            <el-row :gutter="30">
              <el-col :span="6">
                <p>货主编号</p>
                <p>{{ownerData.code}}</p>
              </el-col>
              <el-col :span="6">
                <p>货主名称</p>
                <p>{{ownerData.name}}</p>
              </el-col>
              <el-col :span="6">
                <p>联系人</p>
                <p>{{ownerData.personName}}</p>
              </el-col>
              <el-col :span="6">
                <p>联系电话</p>
                <p>{{ownerData.phone}}</p>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item
        title="货品信息"
        name="3"
        v-if="baseData.status !==3 "
      >
        <div class="main">
          <!-- 表格数据 -->
          <div v-if="listData.length>0">
            <div class="infoTip">总计：{{baseData.goodsTotal}}个 总体积 {{baseData.volumeTotal}}m³</div>
            <el-table
              :data="listData"
              stripe
              border
              style="width: 100%"
            >
              <el-table-column
                type="index"
                align="center"
                label="序号"
                width="68"
              />
              <el-table-column
                prop="ownerName"
                align="center"
                label="货主名称"
                width="160"
              />
              <el-table-column
                prop="goodsCode"
                align="center"
                label="货品编号"
                width="160"
              />
              <el-table-column
                prop="goodsName"
                align="center"
                label="货品名称"
              />
              <el-table-column
                prop="goodsTypeName"
                align="center"
                label="货品类型"
                width="160"
              />
              <el-table-column
                prop="goodsPrice"
                align="center"
                label="货品单价（元）"
                width="160"
              />
              <el-table-column
                prop="goodsGuaranteeDay"
                align="center"
                label="保质天数（天）"
                width="160"
              />
              <el-table-column
                prop="goodsUnit"
                align="center"
                label="单位"
              />
              <el-table-column
                prop="goodsVolume"
                align="center"
                label="体积(m³)"
                width="160"
              />

            <el-table-column
                prop="planNum"
                align="center"
                label="预计到货数"
                width="160"
              />
            </el-table>
            <!-- end -->
            <!-- 分页 -->
            <base-pagination :total="paging.total" :limit="paging.size" @current-change="handleCurrentChange"  @size-change="handleSizeChange"></base-pagination>
            <!-- end -->
          </div>
          <div
            v-else
            class="emptyTip"
          >
            <span class="imgIcon"></span>
            <p>暂无入库单</p>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item
        title="运输信息"
        name="4"
        v-if="baseData.status !==3 "
      >
        <div class="main">
          <div class="baseInfo">
            <el-row :gutter="30">
              <el-col :span="6">
                <p>运单编号</p>
                <p>{{baseData.billCode}}</p>
              </el-col>
              <el-col :span="6">
                <p>承运商</p>
                <p>{{baseData.carrierName}}</p>
              </el-col>
              <el-col :span="6">
                <p>计划到达时间</p>
                <p>{{baseData.planArrivalTime}}</p>
              </el-col>
              <el-col :span="6">
                <p>发货人姓名</p>
                <p>{{baseData.shipperName}}</p>
              </el-col>
            </el-row>
            <el-row
              :gutter="30"
              style="padding-top:20px"
            >
              <el-col :span="6">
                <p>送货人姓名</p>
                <p>{{baseData.deliveryName}}</p>
              </el-col>
              <el-col :span="6">
                <p>送货人电话</p>
                <p>{{baseData.deliveryPhone}}</p>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item
        title="任务信息"
        name="5"
        v-if="baseData.status !==3 "
      >
        <div class="main">
          <div class="infoTip">收货任务</div>
          <div class="baseInfo">
            <el-row :gutter="30">
              <el-col :span="6">
                <p>任务编号</p>
                <p>{{receivingEntityData.code}}</p>
              </el-col>
              <el-col :span="6">
                <p>任务状态</p>
                <p><span v-if="receivingEntityData.status===1">待分配</span><span v-if="receivingEntityData.status===2">收货中</span><span v-if="receivingEntityData.status===3">收货完成</span><span v-if="receivingEntityData.status===4">已取消</span></p>
              </el-col>
              <el-col :span="6">
                <p>收货人</p>
                <p>{{receivingEntityData.receiverName}}</p>
              </el-col>
              <el-col :span="6">
                <p>开始时间</p>
                <p>{{receivingEntityData.createTime}}</p>
              </el-col>
            </el-row>
            <el-row :gutter="30"  style="padding-top:20px">
              <el-col :span="6">
                <p>完成时间</p>
                <p>{{receivingEntityData.updateTime}}</p>
              </el-col>
              <el-col :span="6">
                <p>实收数量</p>
                <p>{{receivingEntityData.realNum}}</p>
              </el-col>
            </el-row>
          </div>
          <div class="infoTip" v-if="groundingEntityData">上架任务</div>
          <div
            class="baseInfo"
            v-if="groundingEntityData"
          >
            <el-row :gutter="30">
              <el-col :span="6">
                <p>任务编号</p>
                <p>{{groundingEntityData.code}}</p>
              </el-col>
              <el-col :span="6">
                <p>任务状态</p>
                <p><span v-if="groundingEntityData.status===1">待分配</span><span v-if="groundingEntityData.status===2">上架中</span><span v-if="groundingEntityData.status===3">收货完成</span><span v-if="groundingEntityData.status===3">已取消</span></p>
              </el-col>
              <el-col :span="6">
                <p>上架人</p>
                <p>{{groundingEntityData.personName}}</p>
              </el-col>
              <el-col :span="6">
                <p>开始时间</p>
                <p>{{groundingEntityData.createTime}}</p>
              </el-col>
            </el-row>
            <el-row :gutter="30"  style="padding-top:20px">
              <el-col :span="6">
                <p>完成时间</p>
                <p>{{groundingEntityData.completionTime}}</p>
              </el-col>
              <el-col :span="6">
                <p>实上数量</p>
                <p>{{groundingEntityData.groundingNum}}</p>
              </el-col>
              <el-col :span="6">
                <p>差异合计</p>
                <p>{{groundingEntityData.differenceNum}}</p>
              </el-col>
            <el-col :span="6">
                <p>损益合计</p>
                <p>{{baseData.idMoney}}</p>
              </el-col>
            </el-row>
            <el-row :gutter="30"  style="padding-top:20px" v-if="loseProfitData.tableData.length >0">
              <el-col :span="6">
                <p>损益明细</p>
              </el-col>
            </el-row>
            <div class="divLoseProfit" v-if="loseProfitData.tableData.length >0" style="padding-top:20px">
                <el-table
                :data="loseProfitData.realData"
                stripe
                border
                style="width: 100%"
                >
                <el-table-column
                    prop="code"
                    align="center"
                    label="损益单号"
                    width="160"
                />
                <el-table-column
                    prop="warehouseName"
                    align="center"
                    label="仓库名称"
                    width="160"
                />
                <!-- <el-table-column
                    prop="areaName"
                    align="center"
                    label="库区名称"
                    width="160"
                /> -->
                <el-table-column
                    prop="locationName"
                    align="center"
                    label="库位名称"
                    width="160"
                />
                <el-table-column
                    prop="ownerName"
                    align="center"
                    label="货主名称"
                    width="160"
                />
                <el-table-column
                    prop="goodsName"
                    align="center"
                    label="货品名称"
                    width="160"
                />
                <el-table-column
                    prop="idNum"
                    align="center"
                    label="损益数量"
                    width="180"
                />
                <el-table-column
                    prop="idMoney"
                    align="center"
                    label="损益金额（元）"
                    width="160"
                />
                <el-table-column
                    prop="updateTime"
                    align="center"
                    label="处理时间"
                />
                <el-table-column
                    prop="status"
                    align="center"
                    label="损益单状态"
                    width="160"
                >
                    <template slot-scope="{row}">
                    <span v-if="row.status === 1">新建</span>
                    <span v-if="row.status === 2">已调整</span>
                    </template>
                </el-table-column>
                </el-table>
                <base-pagination :currentPage="loseProfitData.paging.current" :total="loseProfitData.paging.total" :limit="loseProfitData.paging.size" @current-change="handleLoseProfitCurrentChange"  @size-change="handleLoseProfitSizeChange"></base-pagination>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
// 公用组件
// 分页
import BasePagination from '@/components/base-pagination/index.vue'
// 基础数据
import { storageInStepSuccessOptions, storageInStepCancleOptions } from '@/utils/common-select-data'
// api数据接口
import { findWarehouseInDetail } from '@/module-storage-in/api/warehouse-in'
import { findWarehouseInListDetailPaging } from '@/module-storage-in/api/warehouse-in-list'
import { ICommonSelectOptions, IStepsOptions } from '@/utils/common-interface'

@Component({
  name: 'ListOutDetails',
  components: {
    BasePagination
  }
})
export default class extends Vue {
  private activeNames = ['1']
  private baseData = {}
  private statusData = []
  private listData = []
  private activeStep = 0
  private ownerData = {}
  private receivingEntityData = {}
  private groundingEntityData = {}
  private paging = {
    current: 1, // 当前页码
    size: 10, // 每页数据量
    total: 0
  }

  private loseProfitData = {
    tableData: [],
    realData: [],
    paging: {
      current: 1, // 当前页码
      size: 10, // 每页数据量
      total: 0
    }
  }

  created() {
    this.getDitails()
    this.getList()
  }

  private getStatus(status:number) {
    let num = status
    if (status > 4) {
      num = status - 1
    }
    return num
  }

  // 功能
  private async getList() {
    const params = {
      current: this.paging.current,
      size: this.paging.size,
      masterId: this.$route.params.id
    }
    const { data } = await findWarehouseInListDetailPaging(params)
    this.listData = data.records
    this.paging.total = parseInt(data.total, 10)
  }

  private handleCurrentChange(page:number) {
    this.paging.current = page
    this.getList()
  }

  private handleSizeChange(page:number) {
    this.paging.size = page
    this.paging.current = 1
    this.getList()
  }

  private handleLoseProfitCurrentChange(page:number) {
    this.loseProfitData.paging.current = page
    const loseProfitData = this.loseProfitData
    this.loseProfitData.realData = loseProfitData.tableData.slice(loseProfitData.paging.size * (page - 1), loseProfitData.paging.size * page)
  }

  private handleLoseProfitSizeChange(page:number) {
    this.loseProfitData.paging.size = page
    this.loseProfitData.paging.current = 1
    this.loseProfitData.realData = this.loseProfitData.tableData.slice(0, page)
  }

  private async getDitails() {
    const id = this.$route.params.id
    if (id !== '') {
      const { data } = await findWarehouseInDetail(id)
      this.baseData = data
      this.ownerData = data.owner ? data.owner : {}
      this.receivingEntityData = data.receivingEntity ? data.receivingEntity : {}
      this.groundingEntityData = data.groundingEntity
      const dataArr: any = []
      let stepOptions = storageInStepSuccessOptions
      if (data.status === 3) {
        stepOptions = storageInStepCancleOptions
      }
      stepOptions.forEach((item: ICommonSelectOptions, i: number) => {
        const obj = { label: item.label }as IStepsOptions
        (this.baseData as any).timeArray.forEach((val: any, n: any) => {
          if (i === n) {
            obj.time = val
          }
        })
        dataArr.push(obj)
      })
      this.statusData = dataArr
      // 生成损益明细表格数据
      const loseProfitList = data.idList ? data.idList : []
      this.loseProfitData.tableData = loseProfitList.map((item:any) => {
        return {
          ...item,
          warehouseName: data.warehouseName,
          areaName: data.areaName,
          ownerName: (this.ownerData as any).name
        }
      })
      this.handleLoseProfitSizeChange(10)
    }
  }
}
</script>

<style scoped>
.divSteps {
  width: 70%;
  margin: 22px auto 37px;
}
</style>
